<template>
	<!-- 轮播图 -->
	<div id="Banner">
		<div class="swiper-demo">
			<div class="banner swiper-container" id="banner">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img src="http://public.znrdtech.cn/images/DeduxIvtR_ihUu1A-lWScg.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<img src="http://public.znrdtech.cn/images/J60NV_4IRLi_bSAjCZxZoA.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<img src="http://public.znrdtech.cn/images/pBUs3NL7QK-0TVa8wMyjEw.jpg" alt="" />
					</div>
				</div>
				<div class="swiper-pagination"></div>
				<div class="swiper-button-prev swiper-banner-prev"></div>
				<div class="swiper-button-next swiper-banner-next"></div>
			</div>
		</div>
	</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
	mounted() {
		// eslint-disable-next-line no-new
		new Swiper('.banner', {
			// direction: 'vertical', // 垂直切换选项
			loop: true, // 循环模式选项
			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination'
			},
			// 如果需要前进后退按钮
			navigation: {
				nextEl: '.swiper-banner-next',
				prevEl: '.swiper-banner-prev'
			}
		})
	}
}
</script>
<style lang="less" scoped>
.swiper-demo {
	width: 100%;
	margin: 0 auto;
	.banner {
		.swiper-slide {
			aspect-ratio: 32/9;
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
	.swiper-button-prev,
	.swiper-button-next {
		margin: -40px 0 0 0;
		padding: 40px 25px;
		background-color: rgba(0, 0, 0, 0.25);
		color: #999;
	}
}
</style>
<style lang="less">
.swiper-pagination {
	.swiper-pagination-bullet {
		width: 40px;
		height: 8px;
		display: inline-block;
		border-radius: 0%;
	}
}
</style>
